<template>
    <div>
        <div>
            <!-- layout布局 span默认值为24（栅格的宽度） -->
            <el-row type="flex" justify="start">

                <el-col :span="3">
                    <el-input v-model="search" placeholder="输入被保险人名搜索" />
                </el-col>

                <el-col :span="3">
                    <el-select v-model="value" clearable placeholder="是否在保">
                        <el-option label="在保" value="在保"></el-option>
                        <el-option label="未在保" value="未在保"></el-option>
                    </el-select>

                </el-col>
                <!-- <el-col :span="4">
                    <el-select v-model="value" clearable placeholder="是否在保">
                        <el-option label="在保" value="在保"></el-option>
                        <el-option label="未在保" value="未在保"></el-option>
                    </el-select>
                </el-col> -->
                <el-col :span="9">
                    <el-button type="primary" plain>重置</el-button>
                </el-col>
                <!-- 右侧下拉框 -->
                <el-col :span="3">
                    <el-select v-model="value" clearable placeholder="是否在保">
                        <el-option label="在保" value="在保"></el-option>
                        <el-option label="未在保" value="未在保"></el-option>
                    </el-select>
                </el-col>

                <el-col :span="4.5">
                    <el-date-picker v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-col>
                <el-col :span="2.5">
                    <el-button type="success">重置</el-button>
                </el-col>

            </el-row>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%;margin-top: 15px; ">
            <el-table-column label="上次更新时间">
                <el-table-column label="涉及单位" align="center">
                    <el-table-column label="关键阶段" align="center">
                        <el-table-column prop="name" label="关键跨度" align="center">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>


                <el-table-column label="服务机构" align="center">
                    <!-- 任务派发占四个单元格 -->
                    <el-table-column label="任务派发" align="center">
                        <el-table-column prop="city" label="未接收" align="center" label-class-name="table-column">
                            <!-- 作用域插槽使用的时候是这样，
                            从子组件传过来的名为prop值为city的数据将会被slot-scope接收 -->
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="已接收" align="center">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="未分派" align="center" label-class-name="table-column">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="已分派" align="center">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <!-- 任务执行占两个单元格 -->
                    <el-table-column prop="city" label="任务执行" align="center">
                        <el-table-column prop="city" label="未服务" align="center" label-class-name="table-column">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="已服务" align="center">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                    </el-table-column>


                    <el-table-column prop="city" label="任务完成" align="center">
                        <el-table-column prop="city" label="服务完成" align="center">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                    </el-table-column>


                    <el-table-column prop="city" label="任务结算" align="center">
                        <el-table-column prop="city" label="未结算" align="center" label-class-name="table-column">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="已结算" align="center">
                            <template slot-scope="scope">
                                <a href="#">{{ scope.row.city }}</a>
                            </template>
                        </el-table-column>
                    </el-table-column>

                </el-table-column>
            </el-table-column>
        </el-table>
        <!-- 空白区 -->
        <el-empty description="描述文字"></el-empty>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            search: '',
            value: '',
            value2: '',
            tableData: [
                { name: "企业（家）", city: "0" },
                { name: "项目（已激活）", city: "0" },
            ],
        };
    },
    created() { //页面渲染之前执行
    },
    mounted() {
    },
    watch: {  //监听

    },
    methods: {

        chart() {

        }
    }
}
</script>
<style>
.table-column {
    color: #f00;
}
</style>